<template>
  <div class="comment">
    <back />
    <div class="title">
      <div></div>
      <div>
        <h2>发布动态</h2>
        <p>{{ nickname }}</p>
      </div>
      <div>
        <button @click="send">发送</button>
      </div>
    </div>
    <div class="color">
      <!-- :style="{ color: color?color:'black' }" -->
      <p :style="{color:color}">选择喜欢的文字颜色</p>
      <colorPicker v-model='color' @change="handleChangeColor"></colorPicker>
      <!-- <select name="" id="" v-model="color">
        <option value="red">red</option>
        <option value="blue">blue</option>
        <option value="yellow">yellow</option>
        <option value="green">green</option>
        <option value="pink">pink</option>
      </select> -->
    </div>
    <div class="content">
      <textarea
        ref="textarea"
        :style="{ color: color }"
        cols="40"
        rows="5"
        v-model="content"
        placeholder="分享新鲜事..."
      ></textarea>
    </div>
    <div class="img">
      <div class="icon" >
        <label for="img">
          <img src="../../assets/img/square/照片.svg" alt="" />
        </label>
        <img
          @click="show_emoji"
          src="../../assets/img/square/表情.svg"
          alt=""
        />
      </div>
      <div class="emoji" ref="emoji" v-show="isShow">
        <img  v-for="(item,index) in list" 
        @click="choose(item)"
        :src="`https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/${index}.gif`" alt=""> 
      </div>
      <input
        id="img"
        class="input"
        ref="input"
        type="file"
        name="photos"
        multiple="multiple"
        accept="image/jpg,image/jpeg,image/png,image/svg"
        @change="getFile($event)"
      />
      <div class="show-img">
        <div v-for="(item, index) in img" class="show-img-item">
          <img :src="item" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import VueEmoji from "emoji-vue";
import Back from "../../components/Back/Back.vue";
export default {
  components: { Back, VueEmoji },
  name: "",
  data() {
    return {
      isShow:false,
      content: "",
      colorList: [],
      color: "#000000",
      img: [],
      list :['微笑', '撇嘴', '色', '发呆', '得意', '流泪', '害羞', '闭嘴', '睡', '大哭', '尴尬', '发怒', '调皮', '呲牙', '惊讶', '难过', '酷', '冷汗', '抓狂', '吐', '偷笑', '可爱', '白眼', '傲慢', '饥饿', '困', '惊恐', '流汗', '憨笑', '大兵', '奋斗', '咒骂', '疑问', '嘘', '晕', '折磨', '衰', '骷髅', '敲打', '再见', '擦汗', '抠鼻', '鼓掌', '糗大了', '坏笑', '左哼哼', '右哼哼', '哈欠', '鄙视', '委屈', '快哭了', '阴险', '亲亲', '吓', '可怜', '菜刀', '西瓜', '啤酒', '篮球', '乒乓', '咖啡', '饭', '猪头', '玫瑰', '凋谢', '示爱', '爱心', '心碎', '蛋糕', '闪电', '炸弹', '刀', '足球', '瓢虫', '便便', '月亮', '太阳', '礼物', '拥抱', '强', '弱', '握手', '胜利', '抱拳', '勾引', '拳头', '差劲', '爱你', 'NO', 'OK', '爱情', '飞吻', '跳跳', '发抖', '怄火', '转圈', '磕头', '回头', '跳绳', '挥手', '激动', '街舞', '献吻', '左太极', '右太极']
    }
  },
  computed: {
    userInfo(){
      return JSON.parse(localStorage.getItem("userInfo")) || this.$store.state.user;
    },
    nickname() {
      return this.userInfo && this.userInfo.nickname;
    },
    _id() {
      return this.userInfo && this.userInfo._id;
    }
  },
  created() {
  
      
  },
  mounted(){

  },
  activated() {
    this.$emit("hide");
  },
  deactivated() {
    this.$emit("show");
  },
  methods: {
    //显示表情
    show_emoji(){
      this.isShow = !this.isShow
    },
    choose(item){
      this.content += `[${item}]`
    },
    //选择颜色
    handleChangeColor(){
      // console.log(this.color)
    },
    //上传图片
    getFile(e) {
      let formData = new FormData();
      let file = e.target.files[0];
      if (!file) {
        return alert("请选择照片");
      }
      formData.append("file", file);

      this.$axios({
        url: "/upload/square",
        method: "post",
        data: formData
      }).then(res => {
        this.img.push(res.data);
        // console.log(res.data);
      });
    },
    //提交发表的内容
    send() {
      if(!this._id){
        return alert('登录失效，请先登录')
      }else if(this.content==''){
        return alert('内容不能为空')
      }
      let comment = {};
      comment._id = this._id;
      comment.content = this.content;
      comment.color = this.color;
      comment.img = this.img;
      // console.log(comment
      this.$axios({
        method: "post",
        url: "square",
        data: comment
      }).then(res => {
        // console.log(res)
        alert("发表成功");
        this.username = "";
        this.content = "";
        this.color = "";
        this.img = [];
        this.$router.push("/square");
      });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.comment {
  overflow: hidden;
  height: 100vh;
}
.title {
  padding: 0 5px;
  text-align: center;
  background-color: #eee;
  display: flex;
}
.title div {
  flex: 1;
}
.title p {
  color: #666;
  font-size: 12px;
}
.color {
  padding-left: 10px;
  margin-top: 10px;
}
.color select {
  width: 100%;
  border: 0;
}
.content {
  padding: 0px 10px;
  margin-top: 20px;
}
.content textarea {
  border: 0;
  width: 100%;
  font-size: 16px;
  padding: 5px;

  border: 1px solid #333;
}
button {
  border: 0;
  color: #fff;
  width: 60px;
  height: 40px;
  background-color: orange;
  border-radius: 40%;
  margin-top: 5px;
  margin-left: 70%;
  transform: translate(-50%);
}
.img {
  width: 100%;
  height: 200px;
}
.emoji {
  padding: 0 10px;
  position: fixed;
  left: 0;
  top: 40%;
  width: 100%;
  height: 200px;
}
.icon {
  padding: 5px 10px;
  background-color: #eee;
  width: 100%;
  height: 40px;
}
.icon img {
  width: 40px;
  height: 30px;
}
.input {
  display: none;
}
.show-img {
  padding: 10px;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  /* justify-content: space-around; */
}
.show-img-item {
  /* flex: 1; */
  margin-left: 5px;
  width: 110px;
  height: 110px;
  overflow: hidden;
}
.show-img-item img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
</style>
